<template>
  <view class="content">
    <map id="map" class="map" :show-location="true" :latitude="latitude" :longitude="longitude"></map>
  </view>
</template>

<script>
// const img = '/static/logo.png';

export default {
  data() {
    return {
      latitude: 23.099994,
      longitude: 113.324520,
    }
  },
  onReady() {
    this._mapContext = uni.createMapContext("map", this);

    // 仅调用初始化，才会触发 on.("markerClusterCreate", (e) => {})
    this._mapContext.initMarkerCluster({
      enableDefaultStyle: false,
      zoomOnClick: true,
      gridSize: 60,
      complete(res) {
        console.log('initMarkerCluster', res)
      }
    });

    this._mapContext.on("markerClusterCreate", (e) => {
      console.log("markerClusterCreate", e);
    });

    // this.addMarkers();
  },
  methods: {
    addMarkers() {
      const positions = [
        {
          latitude: 23.099994,
          longitude: 113.324520,
        }, {
          latitude: 23.099994,
          longitude: 113.322520,
        }, {
          latitude: 23.099994,
          longitude: 113.326520,
        }, {
          latitude: 23.096994,
          longitude: 113.329520,
        }
      ]

      const markers = []

      positions.forEach((p, i) => {
        console.log(i)
        markers.push(
          Object.assign({}, {
            id: i + 1,
            iconPath: img,
            width: 50,
            height: 50,
            joinCluster: true, // 指定了该参数才会参与聚合
            label: {
              width: 50,
              height: 30,
              borderWidth: 1,
              borderRadius: 10,
              bgColor: '#ffffff',
              content: `label ${i + 1}`
            }
          }, p)
        )
      })
      this._mapContext.addMarkers({
        markers,
        clear: false,
        complete(res) {
          console.log('addMarkers', res)
        }
      })
    }
  }
}
</script>

<style>
.content {
  flex: 1;
}

.map {
  flex: 1;
}
</style>
